<template>
  <div class="search">
    <header>
      <form action="/">
        <van-search
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
          @cancel="onCancel"
        />
      </form>
    </header>
    <main>
      <p @click="goRentadd(v.communityName)" v-for="(v, i) in result" :key="i">
        {{ v.communityName }}
      </p>
    </main>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      value: "",
      cityArea: [],
    };
  },
  computed: {
    result() {
      if (this.value) {
        return this.cityArea.filter((val) => {
          //过滤数组元素
          return val.communityName.includes(this.value); //如果包含字符返回true
        });
      }
    },
  },
  methods: {
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      this.$router.push("/home/profile");
    },
    goRentadd(val) {
      this.$router.go(-1);
      window.localStorage.setItem("community", val);
      // console.log(val)
    },
    getCityArea() {
      this.$http
        .get("/area/community", {
          params: {
            name: window.localStorage.getItem("city"),
            id: window.localStorage.getItem("cityId"),
          },
        })
        .then((res) => {
          if (res.data.status === 200) {
            this.cityArea = res.data.body;
          }
          console.log(res.data.body);
        });
    },
  },
  created() {
    this.getCityArea();
  },
};
</script>

<style scoped>
.search {
  width: 100%;
  height: 100%;
}
.search main {
  padding: 0 10px;
  font-size: 14px;
}
.search main p {
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #f1f1f1;
}
</style>